<template>
	<view class="mycheckbox_p" @click.stop="check_click()">
		<view class="ucheckbox" :class="{ on: check_judge(checkon) }" :style="[mystyle]" v-if="check_style == 0">
			<text class="ucheckbox_i icon-gou" :style="[iconstyle]"></text>
		</view>

		<view class="round_select" :class="{ on: check_judge(checkon) }" :style="[mystyle]" v-if="check_style == 1">
			<view class="v"></view>
		</view>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'mycheckbox',
	props: {
		check_style: {
			type: [Number, String],
			default: 0,
		},
		checkon: {
			type: [Number, String, Boolean],
			default: 0,
		},
		item: {
			type: [Object],
			default: function () {
				return {};
			},
		},
		index: {
			type: [Number, String],
			default: 0,
		},
		width: {
			type: [Number, String],
			default: '30',
		},
		height: {
			type: [Number, String],
			default: 0,
		},
		border_color: {
			type: [String],
			default: '#eaedf2',
		},
		padding: {
			type: [Number, String],
			default: '2',
		},
	},
	data() {
		return {};
	},
	beforeCreate() {},
	created() {},
	mounted() {},
	computed: {
		mystyle() {
			let _s = {};
			_s['width'] = `${this.width}rpx`;
			_s['height'] = `${this.width}rpx`;
			// _s['borderColor'] = `${this.border_color}`;
			return _s;
		},
		iconstyle() {
			let _icon = {};
			_icon['fontSize'] = `${this.width}rpx`;
			_icon['lineHeight'] = `${this.width}rpx`;
			return _icon;
		},
	},
	methods: {
		check_judge(judge) {
			return judge == 1 || judge == '1' || judge === true;
		},
		check_click() {
			let _this = this;
			this.$emit('check_click', { item: _this.item, value: _this.checkon, index: _this.index });
		},
	},
	watch: {},
};
</script>

<style lang="scss">
/*自定义checkbox  勾选*/
.ucheckbox {
	position: relative;
	border-radius: 50%;
	text-align: center;
	background: transparent;
	color: transparent;
	opacity: 1;
	border: 2rpx solid #999999;
	display: flex;
	align-items: center;
	justify-content: center;

	&::after {
		// 扩大区域方便点击
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		transform: scale(2.5);
		-webkit-transform: scale(2.5);
		-moz-transform: scale(2.5);
		-ms-transform: scale(2.5);
		-o-transform: scale(2.5);
	}

	.ucheckbox_i {
		// 字号跟行高一样
		transform: scale(0.45);
	}

	&.on {
		border: 2rpx solid #1fd1c2;
		background: #1fd1c2;
		color: #ffffff;
	}

	// &.dis {
	// 	border-color: #a8a8a8;
	// 	color: #a8a8a8;
	// 	box-shadow: none;
	// }
}

// 选中样式
.round_select {
	width: 30rpx;
	height: 30rpx;
	border: 2rpx solid #eaedf2;
	padding: 2rpx;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;

	.v {
		width: 100%;
		height: 100%;
		background-color: transparent;
		border-radius: 50%;
		transition: all 0.2s;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		-ms-transition: all 0.2s;
		-o-transition: all 0.2s;
	}

	&.on {
		border: 2rpx solid #1fd1c2;

		.v {
			background-color: #1fd1c2;
		}
	}
}
</style>
